{extend name="layout:base" /}
{block name="page_style"}
  <link href="{$site_root}/static/blonkon1.0.4/global/plugins/bower_components/bootstrap-datepicker-vitalets/css/datepicker.css" rel="stylesheet">
  <link href="{$site_root}/static/plugins/shearphoto/shearphoto_common/css/ShearPhoto.css" rel="stylesheet" type="text/css" media="all">
{/block}
{block name="main_content"}
  <div class="panel panel-tab rounded shadow">
    <!-- Start tabs heading -->
    <div class="panel-heading no-padding">
      <ul class="nav nav-tabs" id="topNavTab">
        <li>
          <a class="page-nav" href="{:url('update')}">
            <i class="fa fa-user-secret"></i>
            <div>
              <span class="text-strong">个人资料</span>
            </div>
          </a>
        </li>
        <li>
          <a class="page-nav" href="{:url('change_password')}">
            <i class="fa fa-lock"></i>
            <div>
              <span class="text-strong">修改密码</span>
            </div>
          </a>
        </li>
        <li class="active">
          <a class="page-nav" href="#tab1-1" data-toggle="tab">
            <i class="fa fa-camera"></i>
            <div>
              <span class="text-strong">头像修改</span>
            </div>
          </a>
        </li>
      </ul>
    </div><!-- /.panel-heading -->
    <!--/ End tabs heading -->

    <!-- Start tabs content -->
    <div class="panel-body">
      <div class="tab-pane fade in active inner-all" id="tab1-1">
        <div class="row">
          {notempty name="notice"}
            <div class="col-xs-12">
              <div class="alert alert-success">
                {$notice}
              </div>
            </div>
          {/notempty}
          <div class="col-md-12">
            <form id="model-form" method="post" action="" class="form-horizontal form-bordered">
              <div class="form-body">
                <div class="form-group">
                  <div class="col-sm-3 col-xs-4 vcenter text-right">
                    <label class="control-label">
                      用户头像：
                    </label>
                  </div>
                  <div class="controls col-sm-6 col-xs-7 vcenter">
                    <div class="user-avatar-preview">
                      <img class="img-circle img-bordered-primary update-avatar" src="{$site_root}{$user|show_user_avatar_url=###}">
                      <input type="hidden" name="avatar" id="avatar" value="{$user.avatar|default=''}">
                      <div class="btn-option hidden-xs">
                        <button id="change-avatar" class="btn btn-info">修改头像</button>
                      </div>
                    </div>
                  </div>
                </div><!-- /.form-group -->
              </div><!-- /.form-body -->
              <div class="form-footer">
                <div class="text-center">
                  <input type="hidden" name="id" id="id" value="{$user.id}">
                  <button class="btn btn-success mr-5" type="submit">保存</button>
                  <a href="" class="btn btn-danger">取消</a>
                </div>
                <div class="clearfix"></div>
              </div><!-- /.form-footer -->
            </form>
          </div>
        </div>
      </div>
    </div><!-- /.panel-body -->
    <!--/ End tabs content -->
    <!--/ End pager -->
  </div><!-- /.panel -->

  <!-- Start optional size modal element -->
  <div class="modal fade" id="modal-photo" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">修改头像</h4>
        </div>
        <div class="modal-body">
          {include file="member/photo" /}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-theme" data-dismiss="modal">取消</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
{/block}
{block name="page_js"}
  <script src="{$site_root}/static/common/js/area_select.js"></script>
  <script src="{$site_root}/static/plugins/jquery-validate/jquery.validate.min.js"></script>
  <script src="{$site_root}/static/blonkon1.0.4/global/plugins/bower_components/bootstrap-datepicker-vitalets/js/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="{$site_root}/static/plugins/shearphoto/shearphoto_common/js/ShearPhoto.js"></script>
  <!--ShearPhoto的核心文件 截取，拖拽，HTML5切图，数据交互等都是由这个文件处理，全部由明哥先生汗水交织而成-->
  <script type="text/javascript" src="{$site_root}/static/plugins/shearphoto/shearphoto_common/js/webcam_ShearPhoto.js"></script>
  <!--在线拍照那个FLASH的接口，非技术性文件-->
  <script type="text/javascript" src="{$site_root}/static/plugins/shearphoto/shearphoto_common/js/alloyimage.js"></script>
  <!--图片特效处理,他只负责特效，其他功能与这个文件完全无关，这个JS从腾讯AI文件  如你不要特效的话，顺带删除这个文件，在hendle.js设置关闭特效-->
  <script type="text/javascript" src="{$site_root}/static/plugins/shearphoto/shearphoto_common/js/handle.js"></script>
  <!--设置和处理对象方法的JS文件，要修改设置，请进入这个文件-->
  <script type="text/javascript">
    var $form = $("form#model-form");
    var validator = $form.validate({
      ignore: "",
      rules:{
        "name":{
          minlength: 2,
          maxlength: 30
        },"nickname":{
          minlength: 2,
          maxlength: 10
        },"email":{
          email: true,
          maxlength: 50,
          remote: {
            url: "{:url('index/register/ajax_check_unique')}",
            type: "post",
            data: {
              field: "email",
              id: function(){
                var id = 0;
                if($form.find("input#id").length){
                  id = $form.find("input#id").val();
                }
                return id;
              }
            }
          }
        },"address":{
          minlength: 10,
          maxlength: 100
        }
      },
      messages:{
        "name":{
          minlength: "真实姓名长度必须在2-30之间",
          maxlength: "真实姓名长度必须在2-30之间"
        },"nickname":{
          minlength: "用户昵称长度必须在2-10之间",
          maxlength: "用户昵称长度必须在2-10之间"
        },"email":{
          email: "用户邮箱格式不正确",
          maxlength: "用户邮箱长度不能超过50个字符",
          remote: "用户邮箱已存在"
        },"address":{
          minlength: "详细地址长度必须在10-100之间",
          maxlength: "详细地址长度必须在10-100之间"
        }
      },
      highlight:function(element) {
        $(element).parents('.form-group').addClass('has-error has-feedback');
      },
      unhighlight: function(element) {
        $(element).parents('.form-group').removeClass('has-error');
      },
      submitHandler: function(form){
        var $form = $(form);
        $.ajax({
          url: $form.attr("action"),
          type: $form.attr("method"),
          dataType: "JSON",
          data: $form.serialize(),
          success: function(data){
            if(data.code){
              location.href = data["url"];
            }else{
              alert(data["msg"]);
            }
          }, error: function () {
            alert("数据执行错误！");
          }
        });
      }
    });

    jQuery(function($){
      var selected_province = {$user.province|default='0'};
      var selected_city = {$user.city|default='0'};
      createAreaSelect('province', 0, selected_province);
      createAreaSelect('city', selected_province, selected_city);

      $(".datepicker").datepicker({
        format: 'yyyy-mm-dd',
        todayBtn: 'linked'
      });

      $("#change-avatar").click(function(){
        $("#modal-photo").modal();
        return false;
      })
    });
  </script>
{/block}